<template>
    <div class="home_navTab">
        <div class="nav_tab home_tab" :class="{'is-active': selectHome}" @click="clickHome">
            <el-icon style="margin-left: 0px;margin-right: 5px;font-size: 14px"><Menu /></el-icon>
            <span>工作台</span>
        </div>
        <div v-for="item in navMenuList" class="nav_tab" :class="{'is-active':!selectHome && item.isNavActive}" @click="selectNav(item)">
            <span>{{ item.name }}</span>
            <el-icon @click.stop="removeNav(item)">
                <Close/>
            </el-icon>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import {computed, onMounted, ref, watch} from "vue";
    import {SysMenuTree} from "../../../api/sys/SysMenuApi";
    import store from "../../../store";
    import {changeNavMenu} from "../../../common/MenuUtils";
    import router from "../../../router";
    import {useRoute} from "vue-router";

    let selectHome = ref(false);

    let navMenuList = computed<SysMenuTree[]>(() => store.state.sessionStorage.navMenuList)

    function selectNav(item: SysMenuTree) {
        selectHome.value = false;
        changeNavMenu(item.path)
        router.push(item.path)
    }

    function removeNav(item: SysMenuTree) {
        if (item.isNavActive) {
            clickHome();
        }
        store.commit("sessionStorage/navMenuList", navMenuList.value.filter(value => value.path != item.path))
    }

    function clickHome() {
        router.push('/')
        selectHome.value = true;
    }

    onMounted(() => {
        changeNavMenu(useRoute().path)
        selectHome.value = true;
        for (const item of navMenuList.value) {
            if (item.isNavActive === true) {
                selectHome.value = false;
            }
        }
    })
</script>

<script lang="ts">
    export default {
        name: 'navTab',
    }
</script>
<style scoped lang="scss">
  @import "src/style/theme";


  .home_navTab {
    background-color: $home_main_bg;
    user-select: none;
    padding-left: 10px;
    padding-right: 10px;
    height: $home_nav_height;
    display: flex;
    align-items: end;
  }

  .nav_tab {
    background-color: #DDDDDD;
    font-size: 12px;
    cursor: pointer;
    margin-left: 5px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    //border: 1px solid #A5A8AB;
    padding: 4px 15px 4px 25px;
  }

  .nav_tab.is-active {
    font-weight: bold;
    //border: 1px solid #05166B;
    background-color: #67ABF2;
    color: white;
  }

  .nav_tab:hover {
    background-color: #D1E1F2;
  }

  .el-icon {
    margin-left: 15px;
  }
  .home_tab {
    margin-left: 0;
    padding-right: 25px;
  }
  .nav_tab .el-icon:hover {
    color: white;
    background: gray;
    border-radius: 100px;
    animation: fadenum 5s infinite;
  }

  @keyframes fadenum {
    100% {
      transform: rotate(360deg);
    }
  }
</style>